<template>
  <div>
    <span class="word" v-for="(letter,index) in words" :key="index">{{ letter }}</span>
  </div>
</template>

<script>
export default {
  name: "typist",
  components: {},
  props: {
    content: {
      type: String,
    }
  },
  data() {
    return {
      words: [],
      letters: "",
      time: null
    }
  },
  created() {
  },
  mounted() {
  },

  methods: {
    write(i) {
      return () => {
        this.words.push(this.letters[i]);
        let L = this.letters.length;
        /*如果输入完毕，在2s后开始删除*/
        if (i == L - 1) {
          clearTimeout(this.time)
        }
      }
    },
    begin(str) {
      this.letters = str.split("")
      for (var i = 0; i < this.letters.length; i++) {
        this.time = setTimeout(this.write(i), i * 100);
      }
    }
  },
  computed: {},
  watch: {
    content: {
      handler(newVal, oldVal) {
        this.begin(newVal)
      },
      deep: true,
      immediate: true
    }
  },
  beforeDestroy() {
  },
  destroyed() {
  }
}
</script>

<style scoped lang="scss">

</style>